<template>
  <div class="order-detail-section">
    <el-row>
      <el-col :xs="24" :md="12">
        <el-card class="cool-card">
          <div slot="header" class="clearfix">
            <span>接口参数</span>
          </div>
          <div class="card-form">
            <el-form size="mini" label-position="left" label-width="120px">
              <el-form-item label="ID:">
                <span>{{action.id}}</span>
              </el-form-item>
              <el-form-item label="归属应用:">
                <span>{{action.appName}}</span>
              </el-form-item>
              <el-form-item label="匹配路径:">
                <span>{{action.patternsCondition}}</span>
                <div class="hint-title">匹配路径可能有多个</div>
              </el-form-item>
              <el-form-item label="方法类型:">
                <span>{{action.methodsCondition}}</span>
              </el-form-item>
              <el-form-item label="控制器名称:">
                <span>{{action.controllerName}}</span>
              </el-form-item>
              <el-form-item label="方法名称:">
                <span>{{action.methodName}}</span>
              </el-form-item>
              <el-form-item label="请求头限定符:">
                <span>{{action.headersCondition}}</span>
              </el-form-item>
              <el-form-item label="请求参数限定符:">
                <span>{{action.paramsCondition}}</span>
              </el-form-item>
              <el-form-item label="生产方数据格式:">
                <span>{{action.producesCondition}}</span>
              </el-form-item>
              <el-form-item label="消费方数据格式:">
                <span>{{action.consumesCondition}}</span>
              </el-form-item>
              <el-form-item label="接口安全级别:">
                <el-radio-group v-model="action.grantLevel" size="small">
                  <el-radio :label="0" border>开放接口</el-radio>
                  <el-radio :label="1" border>需登录</el-radio>
                  <el-radio :label="2" border>需授权</el-radio>
                </el-radio-group>
                <div class="hint-title">[需授权]表示需要给用户角色赋予该权限才可访问</div>
              </el-form-item>
              <el-form-item label="接口说明:">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入接口说明"
                  v-model="action.memo">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="onSaveAction">保存修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

      </el-col>
      <el-col :xs="24" :md="12">
        <el-card class="cool-card">
          <div slot="header" class="clearfix">
            <span>限流/熔断参数</span>
          </div>
          <div class="card-form">
            <el-form size="mini" label-position="left" label-width="120px">
              <el-form-item label="超时时间(ms):">
                <span>{{action.connectionTimeout}}</span>
              </el-form-item>
              <el-form-item label="重试次数:">
                <span>{{action.retryTimes}}</span>
              </el-form-item>
              <el-form-item label="熔断时间(ms):">
                <span>{{action.hystrixTimeout}}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {getActionById, updateAction} from "../../api/action-api";

  export default {
    name: "ActionDetail",
    data() {
      return {
        actionId: '',
        action: {
          needGrant: 0
        },
        loading: true
      }
    },
    methods: {
      onSaveAction() {
        this.$loading()
        updateAction(this.action).then(() => {
          this.$message.success('保存成功')
          this.getActionDetail()
          this.$loading().close()
        }).catch(() => {
          this.$loading().close()
        })
      },
      getActionDetail() {
        getActionById(this.actionId).then(res => {
          this.action = res
          console.log(res)
        })
        // this.$loading()
      }
    },
    created() {
      this.actionId = this.$route.query.id
      if (this.actionId) {
        this.getActionDetail();
      }
    }
  }
</script>

<style scoped>
  .card-form {
    padding: 5px 10px;
  }

  .order-detail-section {
    /*padding: 5px;*/
  }
</style>
